<template>
  <div class="container">
    <div class="loading" v-if="loading"></div>
    <div v-show="!loading">
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-card shadow="always">
            <el-form :model="formList" ref="formList" size="normal">
              <div class="title">本年合同</div>
              <div class="titleCompare">合同名称:</div>
              <div class="divCompare">
                <div id="contract_name1" style="display:inline">{{formList.contract_name}}</div>
              </div>
              <div class="titleCompare">合同金额:</div>
              <div class="divCompare">
                <div id="contract_amount1" style="display:inline">{{formList.contract_amount}}</div>
              </div>
              <div class="titleCompare">竣工及验收日期:</div>
              <div class="divCompare">
                <div id="check_time1" style="display:inline">{{formList.check_time}}</div>
              </div>
              <div class="titleCompare">免费运维截止日期:</div>
              <div class="divCompare">
                <div id="nopay_limit1" style="display:inline">{{formList.nopay_limit}}
                </div>
              </div>
              <el-form-item prop="project_contract_info">
                <up-load titleName="验收文件" :size="50" :require="true" :switch="false"
                  :color="formList.project_contract_info!=formList2.project_contract_info?'red':''"
                  v-model="formList.project_contract_info">
                </up-load>
              </el-form-item>
              <el-form-item prop="project_contract">
                <up-load titleName="发改委批复文件" :size="50" :require="true" :switch="false"
                  :color="formList.project_contract!=formList2.project_contract?'red':''"
                  v-model="formList.project_contract">
                </up-load>
              </el-form-item>
              <div class="title">最近一次合同运维信息</div>
              <div class="titleCompare">是否第一次申请项目运维：</div>
              <div class="divCompare">
                <div id="first_apply1" style="display:inline">{{formList.first_apply =='1'?'是':'否'}}
                </div>
              </div>
              <div v-if="formList.first_apply =='0'">
                <div class="titleCompare">运维合同名称:</div>
                <div class="divCompare">
                  <div id="name1" style="display:inline">{{formList.name}}</div>
                </div>
                <div class="titleCompare">运维合同金额:</div>
                <div class="divCompare">
                  <div id="amount1" style="display:inline">{{formList.amount}}</div>
                </div>
                <div class="titleCompare">运维服务提供商:</div>
                <div class="divCompare">
                  <div id="maintain_service_apply1" style="display:inline">{{formList.maintain_service_apply}}</div>
                </div>
                <div class="titleCompare">运维合同开始时间:</div>
                <div class="divCompare">
                  <div id="start_time1" style="display:inline">{{formList.start_time}}</div>
                </div>
                <div class="titleCompare">运维合同结束时间:</div>
                <div class="divCompare">
                  <div id="end_time1" style="display:inline">{{formList.end_time}}</div>
                </div>
                <el-form-item prop="maintenance_contract">
                  <up-load titleName="运维合同" :size="50" :require="true" :switch="false"
                    :color="formList.maintenance_contract!=formList2.maintenance_contract?'red':''"
                    v-model="formList.maintenance_contract">
                  </up-load>
                </el-form-item>
              </div>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-card shadow="always">
            <el-form :model="formList2" ref="formList2" size="normal">
              <div class="title">往年合同</div>
              <div class="titleCompare">合同名称:</div>
              <div class="divCompare">
                <div id="contract_name2" style="display:inline">{{formList2.contract_name}}</div>
              </div>
              <div class="titleCompare">合同金额:</div>
              <div class="divCompare">
                <div id="contract_amount2" style="display:inline">{{formList2.contract_amount}}</div>
              </div>
              <div class="titleCompare">竣工及验收日期:</div>
              <div class="divCompare">
                <div id="check_time2" style="display:inline">{{formList2.check_time}}</div>
              </div>
              <div class="titleCompare">免费运维截止日期:</div>
              <div class="divCompare">
                <div id="nopay_limit2" style="display:inline">{{formList2.nopay_limit}}
                </div>
              </div>
              <el-form-item prop="project_contract_info">
                <up-load titleName="验收文件" :size="50" :require="true" :switch="false"
                  :color="formList.project_contract_info!=formList2.project_contract_info?'red':''"
                  v-model="formList2.project_contract_info">
                </up-load>
              </el-form-item>
              <el-form-item prop="project_contract">
                <up-load titleName="发改委批复文件" :size="50" :require="true" :switch="false"
                  :color="formList.project_contract!=formList2.project_contract?'red':''"
                  v-model="formList2.project_contract">
                </up-load>
              </el-form-item>
              <div class="title">最近一次合同运维信息</div>
              <div class="titleCompare">是否第一次申请项目运维：</div>
              <div class="divCompare">
                <div id="first_apply2" style="display:inline">{{formList2.first_apply =='1'?'是':'否'}}
                </div>
              </div>
              <div v-if="formList2.first_apply =='0'">
                <div class="titleCompare">运维合同名称:</div>
                <div class="divCompare">
                  <div id="name2" style="display:inline">{{formList2.name}}</div>
                </div>
                <div class="titleCompare">运维合同金额:</div>
                <div class="divCompare">
                  <div id="amount2" style="display:inline">{{formList2.amount}}</div>
                </div>
                <div class="titleCompare">运维服务提供商:</div>
                <div class="divCompare">
                  <div id="maintain_service_apply2" style="display:inline">{{formList2.maintain_service_apply}}</div>
                </div>
                <div class="titleCompare">运维合同开始时间:</div>
                <div class="divCompare">
                  <div id="start_time2" style="display:inline">{{formList2.start_time}}</div>
                </div>
                <div class="titleCompare">运维合同结束时间:</div>
                <div class="divCompare">
                  <div id="end_time2" style="display:inline">{{formList2.end_time}}</div>
                </div>
                <el-form-item prop="maintenance_contract">
                  <up-load titleName="运维合同" :size="50" :require="true" :switch="false"
                    :color="formList.maintenance_contract!=formList2.maintenance_contract?'red':''"
                    v-model="formList2.maintenance_contract">
                  </up-load>
                </el-form-item>
              </div>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import UpLoad from '@/components/Upload'
import { MyCompare } from './compare'
export default {
  name: '',
  components: {
    UpLoad
  },
  props: {
    formList: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      loading: true,
      formList2: {},
    }
  },
  created () {

  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      this.loading = true
      const res = await this.$http('inputContractObj', {
        id: this.formList.copy_old_id
      })
      this.formList2 = res

      this.formList.check_time = this.$util.formatDate(this.formList.check_time)
      this.formList.nopay_limit = this.$util.formatDate(this.formList.nopay_limit)
      this.formList2.check_time = this.$util.formatDate(this.formList2.check_time)
      this.formList2.nopay_limit = this.$util.formatDate(this.formList2.nopay_limit)
      if (this.formList2.first_apply === '1') {
        delete this.formList2.name
        delete this.formList2.amount
        delete this.formList2.maintain_service_apply
        delete this.formList2.start_time
        delete this.formList2.end_time
        delete this.formList2.maintenance_contract
      }
      if (this.formList.start_time) {
        this.formList.start_time = this.formList.start_time.slice(0, 10)
      }
      if (this.formList2.start_time) {
        this.formList2.start_time = this.formList2.start_time.slice(0, 10)
      }
      if (this.formList.end_time) {
        this.formList.end_time = this.formList.end_time.slice(0, 10)
      }
      if (this.formList2.end_time) {
        this.formList2.end_time = this.formList2.end_time.slice(0, 10)
      }

      this.compare()
    },
    compare () {
      setTimeout(() => {
        MyCompare(document.getElementById('contract_name' + '1'), document.getElementById('contract_name' + '2'))
        MyCompare(document.getElementById('contract_amount' + '1'), document.getElementById('contract_amount' + '2'))
        MyCompare(document.getElementById('check_time' + '1'), document.getElementById('check_time' + '2'))
        MyCompare(document.getElementById('nopay_limit' + '1'), document.getElementById('nopay_limit' + '2'))
        MyCompare(document.getElementById('first_apply' + '1'), document.getElementById('first_apply' + '2'))
        MyCompare(document.getElementById('name' + '1'), document.getElementById('name' + '2'))
        MyCompare(document.getElementById('amount' + '1'), document.getElementById('amount' + '2'))
        MyCompare(document.getElementById('maintain_service_apply' + '1'), document.getElementById('maintain_service_apply' + '2'))
        MyCompare(document.getElementById('start_time' + '1'), document.getElementById('start_time' + '2'))
        MyCompare(document.getElementById('end_time' + '1'), document.getElementById('end_time' + '2'))
        this.loading = false
      }, 3000)
    }
  },
  computed: {

  }
}
</script>
<style lang='scss' scoped>
.titleCompare {
  margin-top: 10px;
  font-size: 15px;
}
.divCompare {
  margin: 5px 0px 10px 0px;
  border: 0.5px solid;
  border-radius: 5px;
  padding: 6px;
  border-color: rgb(220, 222, 226);
  min-height: 2rem;
}
.loading {
  position: fixed;
  /* left: 0; */
  /* top: 0; */
  background: url("~@/assets/images/svg/loading.svg") center center no-repeat
    #fff;
  width: 65%;
  height: 500px;
  z-index: 1000;
}
</style>
